<template>
    <el-pagination class="pull-right" sizs="small" background @size-change="handleSizeChange"
        @current-change="handleCurrentChange" :current-page="currentPage" :page-size="pageSize"
        :page-sizes="[10, 20, 50, 100]" layout="total, sizes, prev, pager, next, jumper" :total="total">
    </el-pagination>
</template>

<script>
import { ref, watchEffect, onMounted, reactive, computed } from 'vue';
export default {
    name: 'Pagination',
    props: {
        total: {
            type: [Number, String],
            default: 0
        },
        current: {
            type: [Number, String],
            default: 0
        },
        flag: {
            type: Boolean,
            default: false
        },
        totalData: { //总的数据
            type: Array,
            default: () => ([])
        },
    },
    emits: ["getnewList", "sizeChange", "currentChange", "update:flag"],
    setup(props, { emit }) {
        //console.log(props.total)
        //console.log(props.totalData)
        const data = reactive({
            tableData: props.totalData,
            pageSize: 10,
            currentPage: 1,
            pageData: [], // 分页的数据
            pageTotal: props.total,
        })
        // 实现分页
        const currentPage = ref(1);
        const pageSize = ref(10);
        // // 总条数统计
        const total = ref(props.total);
        const tableData = ref([])
        tableData.value = props.totalData
        const pageData = ref([])
        //console.log("tableData",tableData)
        //const total = computed(() => props.totalData.length);
        //console.log("total",total)
        // 在声明周期函数获取数据
        onMounted(() => {
            fetchData()
        })

        const fetchData = () => {
            let start = currentPage.value > 1 ? (currentPage.value - 1) * pageSize.value : 0
            // 结束位置 = 当前页 x 每页的大小
            let end = currentPage.value * pageSize.value

            // 返回切割数组后的数据
            pageData.value =  tableData.value.slice(start, end)
        }

        // 实现分页的方法
        const queryByPage = () => {
            // 起始位置 = (当前页 - 1) x 每页的大小
            let start = (currentPage.value - 1) * pageSize.value
            // 结束位置 = 当前页 x 每页的大小
            let end = currentPage.value * pageSize.value

            // 返回切割数组后的数据
            return tableData.value.slice(start, end)
        }
        // 监听props.total发生变化时更新total
        watchEffect(() => {
            total.value = props.total;
            //pageData.value = queryByPage()
            //current_page.value = props.current;
        })
        // 改变每页大小的方法
        const handleSizeChange = (val) => {
            pageSize.value = val
            const params = {
                currentPage: 1,
                pageSize: val
            }
            sendNewList()
            emit("sizeChange", NewList.value)
        }

        // 改变当前页的方法
        const handleCurrentChange = (val) => {
            currentPage.value = val
            const params = {
                currentPage: val,
                pageSize: pageSize.value
            }
            sendNewList()
            emit("currentChange", NewList.value)
           
            
        }

        //新列表：
        const NewList = computed(() => {
            tableData.value = props.totalData
            //console.log("ccc",tableData.value)
            return tableData.value.slice((currentPage.value - 1) * pageSize.value, currentPage.value * pageSize.value)

        })
        //自定义事件：向父组件发送 分好页的数据 
        //const emit =defineEmits(['get-newList'])  //生成emit方法
        const sendNewList = () => {
            emit('getnewList', NewList.value)
        }

        return {
            data,
            total,
            currentPage,
            pageSize,
            tableData,
            pageData,
            //paginatedData,
            handleCurrentChange,
            handleSizeChange,
            sendNewList,
        }
    }
}
</script>